<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>预定信息</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
  <!-- Fontastic Custom icon font-->
  <link rel="stylesheet" href="/css/fontastic.css">
  <!-- Google fonts - Poppins -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="/css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="/images/favicon.ico">
  <!-- Tweaks for older IEs--><!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  <!-- JavaScript files-->
  <script src="/vendor/jquery/jquery.min.js"></script>
  <script src="/vendor/popper.js/umd/popper.min.js"> </script>
  <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="/vendor/jquery.cookie/jquery.cookie.js"> </script>
  <script src="/vendor/chart.js/Chart.min.js"></script>
  <script src="/vendor/jquery-validation/jquery.validate.min.js"></script>
  <!-- Main File-->
  <script src="/js/front.js"></script>

  <!-- 公共header js -->
  <script th:include="commons::header_js"> </script>

  <script th:inline="javascript">
    
    function search_by_name(){
      $("#keyWord_button_display").hide();
      $("#byName_button_display").show();
      $("#byPhone_button_display").hide();

      $("#keyWord").hide();
      $("#byName").show();
      $("#byPhone").hide();
    }
    
    function  search_by_id() {
      $("#keyWord_button_display").hide();
      $("#byName_button_display").hide();
      $("#byPhone_button_display").show();

      $("#keyWord").hide();
      $("#byName").hide();
      $("#byPhone").show();
    }

    // 以名字检索数据库查出符合条件的预定信息，只有当输入信息为汉字的输入
    function loadName() {
      var input_text = $("#byName").val();

        // 读取数据库的时候加载读取图标
        var loading_pic  = " <div class=\"card-body no-padding\">" +
                "<div id=\"loading_pic\" class=\"d-flex align-items-center\">\n" +
                "                    <img src=\"/images/loading.gif\" style=\"width: 20%; height: 160px; margin: 0 auto;\"/>\n" +
                "                  </div>" +
                "</div>";

        $("#result_reservation").html(loading_pic);

        $.ajax({
          url: '/select_reservation_byName',
          type: 'POST',
          data: {
            username: $("#byName").val()
          },
          success: function (data) {
            var content = "";
            var var1 = data.empty;
            if (var1 == "empty") {
              content = "  <div class=\"card-body no-padding\">\n" +
                      "                  <div id=\"not_found\" class=\"item d-flex align-items-center\">\n" +
                      "                    <div class=\"text\">\n" +
                      "                      <h3 class=\"h5\">未找到记录 </h3>\n" +
                      "                      <small>请检查您的拼写或者像客户再次确认。</small>\n" +
                      "                    </div>\n" +
                      "                  </div>";
            } else {
              var reservations = data.result_reservations;
              for (var i = 0; i < reservations.length; i++) {
                var po = reservations[i];
                // 订单状态
                // 0=未支付 1=已支付 2=已取消 3=已失效
                var orderState = po.order_state;
                if(orderState == 0) {
                  orderState = "未支付";
                } else if(orderState == 1) {
                  orderState = "已支付";
                } else if(orderState == 2) {
                  orderState = "已取消";
                } else {
                  orderState = "已失效";
                }
                content += "<div id=\"found_result\">\n" +
                        "                    <div class=\"card-header d-flex align-items-center custom_header_style item\">\n" +
                        "                      <div class=\"text\">\n" +
                        '                        <h3 class=\"h5\">订单号:' + po.order_num + '</h3>\n' +
                        '                        <small> 客户姓名:' + po.user_name + '</small>\n' +
                        "                        <small> &nbsp;&nbsp;&nbsp;客户电话:" + po.user_phone + "</small>\n" +
                        "                        <small> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;客户留言:" + po.leave_message_context + "</small>\n" +
                        "                        <small> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单状态:" + orderState + "</small>\n" +
                        "                      </div>\n" +
                        "                    </div>\n" +
                        "                    <div class=\"item d-flex align-items-center\">\n" +
                        "                      <from id=\"from_order_num\" action=\"\" class=\"container-fluid\">\n" +
                        "                        <table class=\"table\">\n" +
                        "                          <thead>\n" +
                        "                          <tr>\n" +
                        "                            <th></th>\n" +
                        "                            <th>房间类型</th>\n" +
                        "                            <th>预定入住时间</th>\n" +
                        "                            <th>预定退房时间</th>\n" +
                        "                            <th>支付状态</th>\n" +
                        "                          </tr>\n" +
                        "                          </thead>\n" +
                        "                          <tbody>\n";

                var orderitem = po.reservation_orderItemList;
                for (var j = 0; j < orderitem.length; j++) {
                  var po2 = orderitem[j];
                  var state = "";
                  if (po2.order_item_state == 0) {
                    state = "未支付"
                  } else if (po2.order_item_state == 1) {
                    state = "(线上预定) 未使用"
                  } else if (po2.order_item_state == 2) {
                    state = "已使用";
                  } else if (po2.order_item_state == 3) {
                    state = "(线上预定) 未支付"
                  } else {
                    state = "已取消"
                  }
                  content += "                          <tr>\n" +
                          "                            <th> <input type=\"radio\" id=\"ratio_input\" name=\"ratio_input\" value=" + po2.order_item_id + " class=\"radio-template\"> </th>\n" +
                          "                            <th class=\"h5\">" + po2.room_type_name + "</th>\n" +
                          "                            <th class=\"h5\">" + po2.plan_stay_time + "</th>\n" +
                          "                            <th class=\"h5\">" + po2.plan_leave_time + " </th>\n" +
                          "                            <th class=\"h5\">" + state + " </th>\n" +
                          "                          </tr>\n";
                }
                content +=
                        "                          </tbody>\n" +
                        "                        </table>\n" +
                        "                        <div class=\"pull-right\">\n" +
                        "                          <a href=\"#\" class=\"btn btn-secondary btn_style\" onclick=\"checkInWithOrderItemInfo()\">\n" +
                        "                            <i class=\"fa fa-check\"> </i>\n" +
                        "                            <span> 开选中房间 <span>\n" +
                        "                          </a>\n" +
                        "                          <a href=\"#\" class=\"btn btn-secondary btn_style\" onclick=\"updateOrderItem()\"  id=\"updateOrderItemId\" aria-disabled=\"true\">\n" +
                        "                            <i class=\"fa fa-remove\"> </i>\n" +
                        "                            <span> 删除选中预定 <span>\n" +
                        "                          </a>\n" +
                        "                        </div>\n" + " <input type='hidden' id='hidden_phoneNum' name='hidden_phoneNum' value=" + po.user_phone + "  >" +
                        "                      </from>\n" +
                        "                      </div>\n" +
                        "                  </div> ";

              }
            }
            $("#result_reservation").html(content);
          }
        })

    }

    // 以手机号检索数据库查出符合条件的预定信息，只有当输入数字为4位或4位以上时执行
    function loadPhone() {
        var input_phone = $("#byPhone").val();
        // 只有当输入的手机号大于等于4位时才进行查询
        if(input_phone.length >= 4 ) {

          // 读取数据库的时候加载读取图标
          var loading_pic  = " <div class=\"card-body no-padding\">" +
                  "<div id=\"loading_pic\" class=\"d-flex align-items-center\">\n" +
                  "                    <img src=\"/images/loading.gif\" style=\"width: 20%; height: 160px; margin: 0 auto;\"/>\n" +
                  "                  </div>" +
                  "</div>";

          $("#result_reservation").html(loading_pic);

          $.ajax({
            url: '/select_reservation_byPhone',
            type: 'POST',
            data: {
              phoneNum: $("#byPhone").val()
            },
            success: function (data) {
              var content = "";
              var var1 = data.empty;
              if (var1 == "empty") {
                content = "  <div class=\"card-body no-padding\">\n" +
                        "                  <div id=\"not_found\" class=\"item d-flex align-items-center\">\n" +
                        "                    <div class=\"text\">\n" +
                        "                      <h3 class=\"h5\">未找到记录 </h3>\n" +
                        "                      <small>请检查您的拼写或者像客户再次确认。</small>\n" +
                        "                    </div>\n" +
                        "                  </div>";
              } else {
                var reservations = data.result_reservations;
                for (var i = 0; i < reservations.length; i++) {
                  var po = reservations[i];
                  // 订单状态
                  // 0=未支付 1=已支付 2=已取消 3=已失效
                  var orderState = po.order_state;
                  if(orderState == 0) {
                    orderState = "未支付";
                  } else if(orderState == 1) {
                    orderState = "已支付";
                  } else if(orderState == 2) {
                    orderState = "已取消";
                  } else {
                    orderState = "已失效";
                  }
                  content += "<div id=\"found_result\">\n" +
                          "                    <div class=\"card-header d-flex align-items-center custom_header_style item\">\n" +
                          "                      <div class=\"text\">\n" +
                          '                        <h3 class=\"h5\">订单号:' + po.order_num + '</h3>\n' +
                          '                        <small> 客户姓名:' + po.user_name + '</small>\n' +
                          "                        <small> &nbsp;&nbsp;&nbsp;客户电话:" + po.user_phone + "</small>\n" +
                          "                        <small> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;客户留言:" + po.leave_message_context + "</small>\n" +
                          "                        <small> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单状态:" + orderState + "</small>\n" +
                          "                      </div>\n" +
                          "                    </div>\n" +
                          "                    <div class=\"item d-flex align-items-center\">\n" +
                          "                      <from id=\"from_order_num\" action=\"\" class=\"container-fluid\">\n" +
                          "                        <table class=\"table\">\n" +
                          "                          <thead>\n" +
                          "                          <tr>\n" +
                          "                            <th></th>\n" +
                          "                            <th>房间类型</th>\n" +
                          "                            <th>预定入住时间</th>\n" +
                          "                            <th>预定退房时间</th>\n" +
                          "                            <th>支付状态</th>\n" +
                          "                          </tr>\n" +
                          "                          </thead>\n" +
                          "                          <tbody>\n";

                  var orderitem = po.reservation_orderItemList;
                  for (var j = 0; j < orderitem.length; j++) {
                    var po2 = orderitem[j];
                    var state = "";
                    if (po2.order_item_state == 0) {
                      state = "未支付"
                    } else if (po2.order_item_state == 1) {
                      state = "(线上预定) 未使用"
                    } else if (po2.order_item_state == 2) {
                      state = "已使用";
                    } else if (po2.order_item_state == 3) {
                      state = "(线上预定) 未支付"
                    } else {
                      state = "已取消"
                    }
                    content += "                          <tr>\n" +
                            "                            <th> <input type=\"radio\" id=\"input-1\" name=\"ratio_input\" value=" + po2.order_item_id + " class=\"radio-template\"> </th>\n" +
                            "                            <th class=\"h5\">" + po2.room_type_name + "</th>\n" +
                            "                            <th class=\"h5\">" + po2.plan_stay_time + "</th>\n" +
                            "                            <th class=\"h5\">" + po2.plan_leave_time + " </th>\n" +
                            "                            <th class=\"h5\">" + state + " </th>\n" +
                            "                          </tr>\n";
                  }
                  content +=
                          "                          </tbody>\n" +
                          "                        </table>\n" +
                          "                        <div class=\"pull-right\">\n" +
                          "                          <a href=\"#\" class=\"btn btn-secondary btn_style\" onclick=\"checkInWithOrderItemInfo()\">\n" + "                            <span> 开选中房间 <span>\n" +
                          "                          </a>\n" +
                          "                          <a href=\"#\" class=\"btn btn-secondary btn_style\" onclick=\"updateOrderItem()\"  id=\"updateOrderItemId\" aria-disabled=\"true\">\n" +
                          "                            <i class=\"fa fa-remove\"> </i>\n" +
                          "                            <span> 删除选中预定 <span>\n" +
                          "                          </a>\n" +
                          "</div>\n" + " <input type='hidden' id='hidden_phoneNum' name='hidden_phoneNum' value=" + po.user_phone + "  >" +
                          "                      </from>\n" +
                          "                      </div>\n" +
                          "                  </div> ";
                }
              }
              $("#result_reservation").html(content);
            }
          })
        }
    }

    // 以订单项号更新订单项状态，此项一般用于软删除
    function updateOrderItem() {
        // 在操作中 禁止按钮 避免多次提交；
        $("#updateOrderItemId").addClass("disabled");
        var var_order_item_id = $('input:radio[name="ratio_input"]:checked').val()
        if(var_order_item_id != undefined) {
        $.ajax({
            url: '/update_reservation_item_flag',
            type: 'POST',
            data: {
                order_item_id: var_order_item_id,
                phoneNum: $("#hidden_phoneNum").val()
            },
            success: function (data) {
              var content = "";
                var reservations = data.result_reservations;
                for (var i = 0; i < reservations.length; i++ )
                {
                  var po = reservations[i];
                  // 订单状态
                  // 0=未支付 1=已支付 2=已取消 3=已失效
                  var orderState = po.order_state;
                  if(orderState == 0) {
                    orderState = "未支付";
                  } else if(orderState == 1) {
                    orderState = "已支付";
                  } else if(orderState == 2) {
                    orderState = "已取消";
                  } else {
                    orderState = "已失效";
                  }
                  content += "<div id=\"found_result\">\n" +
                          "                    <div class=\"card-header d-flex align-items-center custom_header_style item\">\n" +
                          "                      <div class=\"text\">\n" +
                          '                        <h3 class=\"h5\">订单号:' + po.order_num + '</h3>\n' +
                          '                        <small> 客户姓名:' + po.user_name  + '</small>\n' +
                          "                        <small> &nbsp;&nbsp;&nbsp;客户电话:" + po.user_phone + "</small>\n" +
                          "                        <small> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;客户留言:" + po.leave_message_context + "</small>\n" +
                          "                        <small> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单状态:" + orderState + "</small>\n" +
                          "                      </div>\n" +
                          "                    </div>\n" +
                          "                    <div class=\"item d-flex align-items-center\">\n" +
                          "                      <from id=\"from_order_num\" action=\"\" class=\"container-fluid\">\n" +
                          "                        <table class=\"table\">\n" +
                          "                          <thead>\n" +
                          "                          <tr>\n" +
                          "                            <th></th>\n" +
                          "                            <th>房间类型</th>\n" +
                          "                            <th>预定入住时间</th>\n" +
                          "                            <th>预定退房时间</th>\n" +
                          "                            <th>支付状态</th>\n" +
                          "                          </tr>\n" +
                          "                          </thead>\n" +
                          "                          <tbody>\n";

                  var orderitem = po.reservation_orderItemList;
                  for(var j = 0; j < orderitem.length; j++) {
                    var po2 = orderitem[j];
                    var state = "";
                    if (po2.order_item_state == 0) {
                      state = "未支付"
                    } else if (po2.order_item_state == 1) {
                      state = "(线上预定) 未使用"
                    } else if (po2.order_item_state == 2) {
                      state = "已使用";
                    } else if (po2.order_item_state == 3) {
                      state = "(线上预定) 未支付"
                    } else {
                      state = "已取消"
                    }
                    content +=  "                          <tr>\n" +
                            "                            <th> <input type=\"radio\" id=\"ratio_input\" name=\"ratio_input\" value=" + po2.order_item_id + " class=\"radio-template\"> </th>\n" +
                            "                            <th class=\"h5\">" +  po2.room_type_name + "</th>\n" +
                            "                            <th class=\"h5\">" + po2.plan_stay_time +  "</th>\n" +
                            "                            <th class=\"h5\">" + po2.plan_leave_time + " </th>\n" +
                            "                            <th class=\"h5\">" + state + " </th>\n" +
                            "                          </tr>\n";
                  }
                  content +=
                          "                          </tbody>\n" +
                          "                        </table>\n" +
                          "                        <div class=\"pull-right\">\n" +
                          "                          <a href=\"#\" class=\"btn btn-secondary btn_style\" onclick=\"checkInWithOrderItemInfo()\">\n" +
                          "                            <i class=\"fa fa-check\"> </i>\n" +
                          "                            <span> 开选中房间 <span>\n" +
                          "                          </a>\n" +
                          "                          <a href=\"#\" class=\"btn btn-secondary btn_style\" onclick=\"updateOrderItem()\" id=\"updateOrderItemId\" aria-disabled=\"true\">\n" +
                          "                            <i class=\"fa fa-remove\"> </i>\n" +
                          "                            <span> 删除选中预定 <span>\n" +
                          "                          </a>\n" +
                          "                        </div>\n" + " <input type='hidden' id='hidden_phoneNum' name='hidden_phoneNum' value=" + po.user_phone + "  >" +
                          "                      </from>\n" +
                          "                      </div>\n" +
                          "                  </div> ";

                }

              $("#result_reservation").html(content);
                // 成功删除预定
                // 将成功删除订单项的信息放入提醒框
              var content3 = "";
              content3 += "<div class=\"alert alert-success alert-dismissible fade show\" role=\"alert\">\n" +
                      "          <strong>" + data.result_info + "</strong> \n" +
                      "          <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\" onclick=\"remove_alert_style()\">\n" +
                      "            <span aria-hidden=\"true\">&times;</span>\n" +
                      "          </button>\n" +
                      "        </div>"
              $("#alert_container").addClass("alert_style");
              $("#alert_container").html(content3);
            }
        })}
        else {
          // 将没有选中订单项的提醒放入提醒框
          var content3 = "";
          content3 += "<div class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\">\n" +
                  "          <strong>您未选中任何订单项</strong> \n" +
                  "          <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\" onclick=\"remove_alert_style()\">\n" +
                  "            <span aria-hidden=\"true\">&times;</span>\n" +
                  "          </button>\n" +
                  "        </div>"
          $("#alert_container").addClass("alert_style");
          $("#alert_container").html(content3);
        }
      //操作完成 将按钮恢复可点击
      $("#updateOrderItemId").removeClass("disabled");
    }

    // 开启一个新页面将数据传过去开房
    function checkInWithOrderItemInfo() {
      var var_order_item_id = $('input:radio[name="ratio_input"]:checked').val()
      if(var_order_item_id != undefined) {
        var newwindow=window.open("/get_order_item?order_item_id=" + var_order_item_id + "","_self");
        window.focus();
      }
      else {
        // 将没有选中订单项的提醒放入提醒框
        var content3 = "";
        content3 += "<div class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\">\n" +
                "          <strong>您未选中任何订单项</strong> \n" +
                "          <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\" onclick=\"remove_alert_style()\">\n" +
                "            <span aria-hidden=\"true\">&times;</span>\n" +
                "          </button>\n" +
                "        </div>"
        $("#alert_container").addClass("alert_style");
        $("#alert_container").html(content3);
      }
    }

    // 移除alert 容器的style
    function remove_alert_style(){
      $("#alert_container").removeClass("alert_style");
    }
  </script>

  <style>
    a:visited { color: #463838; text-decoration: line-through; } /* 已访问的链接 */

    .custom_header_style{
      border-top: 1px solid #eee;
    }

    .btn_style{
      padding: 3px 8px;
      margin-top: 5px;
      margin-right: 5px;
    }

    .alert_style {
      padding: 1.5rem;
      margin-right: 0;
      margin-left: 0;
      border-width: .2rem;
    }
  </style>
</head>
<body>
<div class="page">
  <header th:include="commons::common_header"></header>

  <div class="page-content d-flex align-items-stretch">
    <!-- 在commons里面，sidebar -->
    <nav th:include="commons::common_sidebar" class="side-navbar"></nav>

    <div class="content-inner">
      <!-- Page Header-->
      <header class="page-header">
        <div class="container-fluid">
          <h2 class="no-margin-bottom">预定信息</h2>
        </div>
      </header>
      <!-- 提醒框显示页面 -->
      <div class="container-fluid" id="alert_container">

      </div>
      <!-- 个人操作区域 -->
      <section>
        <div class="container-fluid">
          <!-- 检索框 -->
          <div class="card-header d-flex align-items-center">
            <div class="input-group mt-3 mb-3">
              <div class="input-group-prepend">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
                  <span id="keyWord_button_display">关键字</span>
                  <span style="display: none" id="byName_button_display">客户姓名</span>
                  <span style="display: none" id="byPhone_button_display">客户手机号</span>
                </button>
                <div class="dropdown-menu">
                  <a class="dropdown-item btn" onclick="search_by_name()">姓名</a>
                  <a class="dropdown-item btn" onclick="search_by_id()">手机号</a>
                </div>
              </div>
              <input id="keyWord" type="text" class="form-control" name="reverve_info_input" placeholder="关键字">
              <input id="byName" type="text" style="display: none"  class="form-control" name="reverve_info_input" placeholder="客户姓名" oninput="loadName()">
              <input id="byPhone" type="text" style="display: none" class="form-control" name="reverve_info_input" placeholder="客户手机" oninput="loadPhone()">
            </div>
          </div>
          <!-- 检索框结束 -->

          <!-- 预定结果区域 -->
          <div class="row">
            <div class="col-lg-12">
              <!-- 替换部分 -->
              <div class="articles card" th:fragment="reservation" id="result_reservation">
                <div class="card-body no-padding">
                  <!-- 未找到记录显示 -->
                  <div id="not_found" class="item d-flex align-items-center">
                    <div class="text">
                      <h3 class="h5">请选择客户姓名或者客户手机号输入信息 </h3>
                      <small>客户的预定信息将会在这里展示 </small>
                    </div>
                  </div>

                  <!-- -->
                  <div id="found_result" style="display: none">
                    <div class="card-header d-flex align-items-center custom_header_style item">
                      <div class="text">
                        <h3 class="h5">订单号:1234567890 </h3>
                        <small> 客户姓名: 张三 </small>
                        <small> &nbsp;&nbsp;&nbsp;客户电话: 18080808080 </small>
                      </div>
                    </div>
                    <div class="item d-flex align-items-center">
                      <from id="from_order_num" action="" class="container-fluid">
                        <table class="table">
                          <thead>
                          <tr>
                            <th></th>
                            <th>房间类型</th>
                            <th>预定入住时间</th>
                            <th>预定退房时间</th>
                            <th>留言</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr>
                            <th> <input type="radio" id="input-1" name="input-1" class="radio-template"> </th>
                            <th class="h5">单人房</th>
                            <th class="h5">2019-10-9</th>
                            <th class="h5">2019-10-11</th>
                            <th class="h5">"坏起来了"</th>
                          </tr>
                          <tr>
                            <th> <input type="radio" id="input-2" name="input-1" class="radio-template"> </th>
                            <th class="h5">双人房</th>
                            <th class="h5">2019-10-9</th>
                            <th class="h5">2019-10-11</th>
                            <th class="h5">"好起来了"</th>
                          </tr>
                          <tr>
                            <th> <input type="radio" id="input-3" name="input-1" class="radio-template"> </th>
                            <th class="h5">总统套间</th>
                            <th class="h5">2019-10-9</th>
                            <th class="h5">2019-10-11</th>
                            <th class="h5">"好起来了"</th>
                          </tr>
                          </tbody>
                        </table>
                        <div class="pull-right">
                          <a href="#" class="btn btn-secondary btn_style">
                            <i class="fa fa-check"> </i>
                            <span> 开选中房间 </span>
                          </a>

                          <a href="#" class="btn btn-secondary btn_style">
                            <i class="fa fa-remove"> </i>
                            <span> 删除选中预定 </span>
                          </a>
                        </div>
                      </from>
                        <!--
                        <input type="checkbox" id="input-1" name="input-1" class="checkbox-template">
                        <label for="input-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</label>
                         -->
                      </div>
                  </div>

                  <!-- -->
               </div>
              </div>
            </div>
          </div>
          <!-- 预定结果区域 -->
        </div>
      </section>

      <!-- model -->
      <div class="modal fade" id="new_reservations_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" th:include="commons::reservation_modal">

      </div>
      <!-- Page Footer-->
      <footer class="main-footer" th:include="commons::common_footer"></footer>

    </div>
  </div>

</div>
</body>
</html>